<template>
  <div>

    <ol>
        <li :style="{opacity}">欢迎学习Vue</li>
        <li v-for="info in infoList" :key="info.id">
            {{info.title}}
            <input type="text">
        </li>
    
    </ol>
  </div>
</template>

<script>
export default {
    name:'Info',
    data() {
        return {
            infoList:[
                {id:'001',title:"information1"},
                {id:'002',title:'information2'},
                {id:'003',title:'information3'}
            ],
            opacity:1
        }
    },
    activated(){  //激活调用
        this.times = setInterval(()=>{
            this.opacity-=0.1;
            if(this.opacity <= 0){
                this.opacity=1
            }
            console.log("@")
        },100)
    },
    deactivated(){  //未激活时调用
        clearInterval(this.times)
    },
    
}
</script>

<style>

</style>